<script setup>
    import * as echarts from "echarts"
    import { onMounted, ref } from "vue"

    // 使用ref获取dom元素
    const chartRef = ref()

    // 初始化函数
    const init = () => {
        // 基于准备好的 dom，初始化 echarts 实例
        let chart = echarts.init(chartRef.value)

        // 绘制图表
        let options = {
            title: {
                text: "ECharts 入门示例",
            },
            tooltip: {},
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
            },
            yAxis: {},
            series: [
                {
                    name: "销量",
                    type: "bar",
                    data: [5, 20, 36, 10, 10, 20],
                },
            ],
        }

        // 渲染图表
        chart.setOption(options)
    }
    // 声明周期函数，自动执行初始化
    onMounted(() => {
        init()
    })
</script>

<template>
    <div class="main">
        <div ref="chartRef" class="echart"></div>
    </div>
</template>

<style lang="less" scoped>
    /* 样式这里要设置长宽，不然显示不出来 */
    .main {
        width: 100%;
        height: 100%;
        .echart {
            width: 500px;
            height: 480px;
        }
    }
</style>
